<template>
  <div>
    <el-form>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item>
            <el-input></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item>
            <el-button type="primary">
              查询
            </el-button>
            <el-button type="primary">
              清空
            </el-button>
            <el-button type="primary" @click="deleteSelection">
              批量删除
            </el-button>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>

    <!--表格内容-->
    <!-- <el-table ref="addressManageForm" :data="tableData" style="width: 100%; margin-bottom: 5px" border stripe
      highlight-current-row :default-sort="{ prop: 'date', order: 'descending' }" @row-click="handleRowClick"
      @select-all="handleCheckedAllAndCheckedNone" @select="handleCheckedAllAndCheckedNone"
      @selection-change="handleSelectionChange" :header-cell-style="{textAlign:'center'}"
      :cell-style="{textAlign:'center'}">
      <el-table-column fixed type="selection" align="center">
      </el-table-column>
      <el-table-column property="province" label="省份">
      </el-table-column>
      <el-table-column property="city" label="市">
      </el-table-column>
      <el-table-column property="area" label="区">
      </el-table-column>

      <el-table-column label="操作" width="180" align="center">
        <template>
          <el-button circle icon="el-icon-delete" type="danger" title="删除" size="small"
            @click="rowDel(index, row, event)"></el-button>
        </template>
      </el-table-column>


    </el-table> -->
    <!--分页-->
    <!-- <el-pagination :page-sizes="[10, 20, 30, 40, 100]" :page-size="10" :total="100"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination> -->

    <el-tree style="padding:20px 70% 20px 20px" :data="data" show-checkbox node-key="id" default-expand-all
      :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ data }" >
        <span>{{ data.name }}</span>
        <span >
          <el-button v-if="data.type==1" type="text" size="mini">
            添加
          </el-button>
          <el-button type="text" size="mini">
            编辑
          </el-button>
          <el-button type="text" size="mini">
            删除
          </el-button>
        </span>
      </span>
    </el-tree>
  </div>
</template>
      
<script>
import { getAll } from '@/api/systemAdministrator/cooperationManage';
export default {
  name: "AddressManage",
  components: {
  },
  data () {
    return {
      formFileds: {},
      multipleSelection: null,
      tableData: [
        {
          id: 100000,
          parentId: 0,
          name: '中国',
          children: [],
        },
      ],

    };
  },
  methods: {
    submitData () {
      console.log('提交');
    },
    rowDel (index, row, event) {
      // 让当前删除按钮失焦
      event.target.blur();

      this.$confirm("确定要删除当前行吗？", "删除", {
        comfirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        this.tableData.splice(row.id, 1);
        this.$message.success("删除成功");
        return false;
      });
    },
    // deleteAll() {
    //     this.$confirm("确定要删除这些行吗？", "删除", {
    //       comfirmButtonText: "确定",
    //       cancelButtonText: "取消",
    //     }).then(() => {
    //       this.$message.success("删除成功");
    //       return false;
    //     });
    //   },

    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    deleteSelection () {
      if (!this.multipleSelection) {
        this.$message.warning('请至少选择一条数据进行删除！')
        return
      } else {

        this.$confirm('数据将会永久删除，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {

          console.log(this.multipleSelection)

          // delete (array).then(res => {//接口
          //     console.log(res);
          //     this.search();//删除完成后初始化查询列表
          // })

        })
      }
    },
    getList(){
      getAll().then((res) => {
        if(res){
          console.log(res.msg);
          console.log(res.data);
          this.tableData = res.data;
        }
      })
    }
  },
  mounted(){
    this.getList();
  }
};
</script>
      
<style scoped lang="less">
.el-form {
  padding: 0 10px;
}

.el-date-editor {
  width: 100% !important;
}
</style>
      
